/*
 * @Author: guoyangf
 * @Date: 2020-05-29 13:35:58
 * @LastEditTime: 2020-08-12 10:04:30
 * @Description: file content
 */
import { Component } from 'react';
import { base } from 'nc-lightapp-front';
import './index.less';
const { NCTabs } = base;
const NCTabPane = NCTabs.NCTabPane;

class TabCtrl extends Component {

    constructor(props) {
        super(props);
        this.NCProps = window.__SSC_NCProps;
        this.state = {
            activeKey: null
        }
        if (props.activeKey) {
            setTimeout(() => { //第一次初始状态为null，才会触发tab控件的onchange
                this.setState({
                    activeKey: activeKey
                })
            })
        }
        // props.activeKey && this.onChange(props.activeKey)
    }

    onChange = (activeKey) => {
        this.setState({
            activeKey
        })
        this.props.tabOnChange && this.props.tabOnChange(activeKey);
    }

    buttonClick = async (props, key) => {
        console.log('点击按钮的key：', key);
        let btnEvent = this.props.btnEvent;
        if (this.props.btnEvent instanceof Promise) {
            btnEvent = await this.props.btnEvent;
        } 
        if (btnEvent && btnEvent[key]) {
            btnEvent[key]();
        }
        
    }

    getButton() {
        const { button } = this.NCProps;
        if (!this.props.activeKey) {
            return null;
        }
        return (
            <div className="btns-wrap">
                {this.props.btnLeftCustomArea}
                {
                    button.createButtonApp({
                        area: this.props.activeKey + '_head',
                        buttonLimit: 3,
                        onButtonClick: this.buttonClick
                    })
                }
                {/* <button>777</button> */}
            </div>
        )
    }

    componentWillReceiveProps(nextProps) {
        if (!this.props.activeKey && nextProps.activeKey) {

            this.onChange(nextProps.activeKey);
        }
    }

    render() {
        const tabs = this.props.tabData || [];
        const tabShowNumbers = this.props.tabShowNumbers || {};
        return (

            <div className="tab-ctrl-wrap">
                <NCTabs
                    activeKey={this.props.activeKey}
                    navtype="turn"
                    contenttype="moveleft"
                    onChange={this.onChange}
                    extraContent={this.getButton()}
                >
                    {
                        tabs.map((one, index) => {
                            let tabLabel = one.label;
                            if (one.isShowCount && one.billCount !== undefined) {
                                tabLabel += " " + one.billCount
                            }
                            return (
                                <NCTabPane key={one.attrcode} tab={tabLabel}>
                                </NCTabPane>
                            )

                        })
                    }
                </NCTabs>
            </div>

        )
    }
}

export default TabCtrl;